<template>
  <div>
    <!-- logo -->
    <div class="logo">
      <img src="../assets/img/3.png" alt="" />
      <!-- logo文字 -->
      <div class="logo_text">
        <img src="../assets/img/1.png" alt="" />
      </div>
      <!-- 注册 -->
      <div class="zc">
        <router-link to="/register"
          ><img src="../assets/img/2.png" alt=""
        /></router-link>
      </div>
      <!-- 登录 -->
      <div class="dl">
        <router-link to="/login2">
          <img src="../assets/img/5.png" alt=""
        /></router-link>
      </div>
      <!-- 管理员 -->
      <div class="gl">
        <router-link to="/login">
          <img src="../assets/img/6.png" alt=""
        /></router-link>
      </div>
    </div>
    <!-- 走马灯-->
    <div class="focus">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in imgData" :key="item">
          <img :src="item" @click="getIndex" width="100%" height="100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //走马灯图片列表
      imgData: [
        // 肌肤之钥
        require("../assets/img/8.png"),
        // 圣罗兰
        require("../assets/img/9.png"),
        // TF
        require("../assets/img/10.png"),
        // 迪奥
        require("../assets/img/11.png"),
        // 香奈儿
        require("../assets/img/12.png"),
      ],
    };
  },

  methods: {
    getIndex() {
      const token = window.sessionStorage.token;
      if (!token) return this.$router.push("/login2");
      this.$router.push("/shop");
    },
  },
};
</script>

<style lang="less" scoped>
div {
  user-select: none;
}
.logo {
  position: relative;
  width: 100%;
  height: 800px;
  background-image: url("../assets/img/4.png");
  img {
    margin-top: 20px;
    width: 160px;
  }
  .logo_text {
    position: absolute;
    top: 0;
    left: 10px;
  }
  .zc {
    position: absolute;
    top: 120px;
    left: 200px;
    img {
      width: 80px;
      height: 140px;
    }
  }
  .dl {
    position: absolute;
    top: 120px;
    left: 350px;
    img {
      width: 80px;
      height: 140px;
    }
  }
  .gl {
    position: absolute;
    top: 150px;
    left: 490px;
    img {
      width: 380px;
      height: 80px;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.focus {
  position: absolute;
  left: 300px;
  top: 450px;
  width: 600px;
}
</style>>

